<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科研成果详情</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/scientdetail.css"/>
    <style>
        .swiper-container {
            width: 500px;
            height: 300px;
            margin: 20px auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="header">
    <div class="warp">
        <img class="logo" src="../images/logo.png" alt="">
        <ul class="layui-nav" lay-unselect>
            <li class="layui-nav-item">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我<img src="../images/level1.png"
                                                                                             alt=""></a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人资料</a></dd>
                    <dd><a href="javascript:;">我的发布</a></dd>
                    <dd><a href="javascript:;">修改密码</a></dd>
                    <dd><a href="javascript:;">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;">导航</a>
                <dl class="layui-nav-child childbox">
                    <dd>
                        <div class="nvson">
                            <!--<p class="navson"></p>-->
                            <div class="navson-head">
                                <span class="flag">&nbsp</span><span class="nvson-tit">科研成果</span>
                            </div>
                            <ul>
                                <li><a href="">电子信息</a></li>
                                <li><a href="">生物与洗医药</a></li>
                                <li><a href="">航天航空</a></li>
                                <li><a href="">新材料</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="nvson">
                            <!--<p class="navson"></p>-->
                            <div class="navson-head">
                                <span class="flag">&nbsp</span><span class="nvson-tit">科研成果</span>
                            </div>
                            <ul>
                                <li><a href="">电子信息</a></li>
                                <li><a href="">生物与洗医药</a></li>
                                <li><a href="">航天航空</a></li>
                                <li><a href="">新材料</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="nvson">
                            <!--<p class="navson"></p>-->
                            <div class="navson-head">
                                <span class="flag">&nbsp</span><span class="nvson-tit">科研成果</span>
                            </div>
                            <ul>
                                <li><a href="">电子信息</a></li>
                                <li><a href="">生物与洗医药</a></li>
                                <li><a href="">航天航空</a></li>
                                <li><a href="">新材料</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="nvson">
                            <!--<p class="navson"></p>-->
                            <div class="navson-head">
                                <span class="flag">&nbsp</span><span class="nvson-tit">科研成果</span>
                            </div>
                            <ul>
                                <li><a href="">电子信息</a></li>
                                <li><a href="">生物与洗医药</a></li>
                                <li><a href="">航天航空</a></li>
                                <li><a href="">新材料</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                                <li><a href="">新能源与节能</a></li>
                                <li><a href="">资源与环境</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>


                    </dd>

                </dl>

            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">俱乐部</a>
            </li>
            <li class="layui-nav-item"><a href="">中文/English</a></li>

            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<!--导航条-->
<div class="crumbs">
    <div class="warp">
				<span class="layui-breadcrumb" lay-separator=">">
					<a href="">科研成果网</a>
					<a href="">科研成果</a>
                    <!--<a><cite>正文</cite></a>-->
				</span>
    </div>
</div>
<div class="content">
    <div class="warp">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
                <div class="lcot">
                    <div class="textimg">
                        <div class="swiper-container fl">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background-image:url(../images/1.jpg)"></div>
                                <div class="swiper-slide" style="background-image:url(../images/2.jpg)"></div>
                                <div class="swiper-slide" style="background-image:url(../images/3.jpg)"></div>
                                <div class="swiper-slide" style="background-image:url(../images/4.jpg)"></div>
                                <div class="swiper-slide" style="background-image:url(../images/5.jpg)"></div>
                            </div>
                            <!-- Add Pagination -->
                            <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-white"></div>
                            <div class="swiper-button-prev swiper-button-white"></div>
                        </div>
                        <div class="textdetail fl">
                            <ul>
                                <li>《春归堂》独创鼻浴养生三步法</li>
                                <li>分类：医疗保健——鼻浴养生——中药洗鼻</li>
                                <li>合作意向：技术转让、需生产基地</li>
                                <li>国籍：中国</li>
                                <li>
                                    <button type="button" class="layui-btn  layui-btn-normal layui-btn-lg">资料下载查看 <b>60.00</b>元
                                    </button>
                                    <button
                                            type="button" class="layui-btn  layui-btn-normal layui-btn-lg">联系方式
                                        <b>60.00</b>元
                                    </button>
                                </li>
                            </ul>

                        </div>
                        <div class="clear"></div>
                        <div class="carouse-indicator">
                            <div class="indimg indimg-active"><img src="../images/1.jpg" alt="">
                            </div>
                            <div class="indimg"><img src="../images/2.jpg" alt=""></div>
                            <div class="indimg"><img src="../images/3.jpg" alt=""></div>
                            <div class="indimg"><img src="../images/4.jpg" alt=""></div>
                            <div class="indimg"><img src="../images/5.jpg" alt=""></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="text1" style="margin-top: 30px">
                        <p>成果简介：杭州美烁科技采用中医理论及传世古方，结合现代医学，独创 鼻浴养生三步法：清洁除菌——治理滋养——深层修复 ，有效解决鼻腔的二大问题是“脏”和“干”。</p>
                    </div>
                    <div class="text1">
                        <p>功能描述：生命靠呼吸，鼻子排第一！古称“面王”。人体的“生命门户”。《春归堂》祖传秘方，有效改善鼻子亚健康及病症问题。鼻浴养生，让全身气机通畅，百疾难生。</p>

                    </div>
                </div>
            </div>
            <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                <div class="rcot">
                    <div class="sidetit">
                        <span>&nbsp</span> <span>为你推荐</span>
                    </div>
                    <div class="sidebox">
                        <img src="../images/side1.png" alt="">
                        <p class="p1">《春归堂》独创鼻浴养生三步法</p>
                        <p class="p2">
                            <button type="button" class="layui-btn  layui-btn-radius">中药洗鼻</button>
                        </p>
                    </div>
                    <hr class="layui-bg-gray">
                    <div class="sidebox">
                        <img src="../images/side1.png" alt="">
                        <p class="p1">《春归堂》独创鼻浴养生三步法</p>
                        <p class="p2">
                            <button type="button" class="layui-btn  layui-btn-radius">中药洗鼻</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer">
    <div class="warp">
        <ul>
            <li><a href="">合作单位</a></li>
            <li><a href="">免费注册</a></li>
            <li><a href="">免责申明</a></li>
            <li><a href="">最新政策</a></li>
            <li><a href="">论坛与展会</a></li>
            <li><a href="">最近活动</a></li>
            <li><a href="">重推项目</a></li>
            <li><a href="">全球站点分布</a></li>
            <li><a href="">公司简介</a></li>
            <li><a href="">联系我们</a></li>
            <div class="clear"></div>
        </ul>
        <p>粤ICP备17123781号</p>
        <p>© 科研成果网版权所有</p>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- Swiper JS -->
<script src="../js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    //控制轮播条目;
    var indi = $('.carouse-indicator>.indimg');
    var swiper1 = new Swiper('.swiper-container', {
        //pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        effect: 'fade',
        onSlideChangeEnd: function (swiper) {
            var acindex = swiper.activeIndex;
            indi.each(function () {
                $(this).removeClass('indimg-active');
            })
            $(indi[acindex]).addClass('indimg-active');
        }
    });


    indi.click(function () {
        var index = $(this).index();
        indi.each(function () {

            $(this).removeClass('indimg-active');
        })
        $(this).addClass('indimg-active');
        swiper1.slideTo(index, 500, false);
    })

</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['element', 'carousel', 'form'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //建造实例 轮播图
        var carousel = layui.carousel;
        var ins = carousel.render({
            elem: '#test1',
            width: '320px' //设置容器宽度
            ,
            height: '235px',
            arrow: 'hover' //始终显示箭头
            ,
            anim: 'fade' //切换动画方式
            ,
            autoplay: false,
            indicator: 'outside',
        });

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)

        });
    });
</script>
</html>
